<div style="padding:20px;">
<label for="table_name_#table.table_id">Table Name</label><br/>
<input type="text" name="name" id="table_name_#table.table_id" value="#table.name" style="width:220px;padding:5px;" /><br/><br/>
<div style="float:left;" id="table_#table.table_id"></div>
<div style="float:left;" id="tableFKs_#table.table_id"></div>
<div style="clear:both;"></div>
<select name="types#table.table_id" id="types#table.table_id" style="display:none;">
	<option value="DOUBLE">Double</option>
	<option value="TINYINT NOT NULL">Flag</option>
	<option value="FLOAT">Float</option>
	<option value="INTEGER NOT NULL">Foreign Key</option>
	<option value="INTEGER">Integer</option>
	<option value="VARCHAR(1024)">Long String</option>
	<option value="LONGTEXT">Long Text</option>
	<option value="VARCHAR(255)">String</option>
	<option value="TEXT">Text</option>
	<option value="BIGINT">Timestamp</option>
</select>
<!-- always enable scaffolding -->
<fieldset>
	<div class="">
		<input type="checkbox" name="scaffold_data" value="1" id="sfd#table.table_id" onchange="$('data_scaffold#table.table_id').toggle();if(this.checked||$('sfh#table.table_id').checked)$('sel_module#table.table_id').disabled=false;else $('sel_module#table.table_id').disabled=true;" />
		<label for="sfd#table.table_id">also create data queries</label>
	</div>
	<div id="data_scaffold#table.table_id" class="scaffold" style="display:none;">
		<h3>Create Data Queries For: </h3>
		<input type="checkbox" class="tosave" name="d_scaffold[list]" value="1" id="list" checked="checked" />
		<label for="list">list</label>
		<input type="checkbox" class="tosave" name="d_scaffold[select]" value="1" id="select" checked="checked" />
		<label for="select">select</label> 
		<input type="checkbox" class="tosave" name="d_scaffold[insert]" value="1" id="insert" checked="checked" />
		<label for="insert">insert</label> 
		<input type="checkbox" class="tosave" name="d_scaffold[update]" value="1" id="update" checked="checked" />
		<label for="update">update</label> 
		<input type="checkbox" class="tosave" name="d_scaffold[delete]" value="1" id="delete" checked="checked" />
		<label for="delete">delete</label> 
	</div>
	<div class="">
		<input type="checkbox" name="scaffold_handlers" value="1" id="sfh#table.table_id" onchange="$('handler_scaffold#table.table_id').toggle();if(this.checked||$('sfd#table.table_id').checked)$('sel_module#table.table_id').disabled=false;else $('sel_module#table.table_id').disabled=true;" />
		<label for="sfh#table.table_id">also create event handlers</label>
	</div>
	<div id="handler_scaffold#table.table_id" class="scaffold" style="display:none;">
		<h3>Create Event Handlers For: </h3>
		<input type="checkbox" class="tosave" name="h_scaffold[list]" value="1" id="hlist" checked="checked" />
		<label for="hlist">overview</label>
		<input type="checkbox" class="tosave" name="h_scaffold[view]" value="1" id="view" checked="checked" />
		<label for="view">detail view</label> 
		<input type="checkbox" class="tosave" name="h_scaffold[edit]" value="1" id="edit" checked="checked" />
		<label for="edit">edit / insert</label> 
		<input type="checkbox" class="tosave" name="h_scaffold[delete]" value="1" id="remove" checked="checked" />
		<label for="remove">delete</label> 
	</div>
	<div class="">
		<label for="sel_module#table.table_id">create in module</label>			
		<select id="sel_module#table.table_id" class="tosave" name="scaffold[fk_module_id]" size="1" disabled="true">
			<option value="0" disabled="true" selected="selected">Please choose</option>
			<c:foreach var="modules" name="module">
				<option value="#module.module_id">#module.name</option>
			</c:foreach>
		</select>
	</div>
</fieldset>

<? $fields = (strlen($arr_param["table"]["field_names"]) > 0 ? explode(":", $arr_param["table"]["field_names"]) : Array()); ?>
<? $types = (strlen($arr_param["table"]["field_types"]) > 0 ? explode(":", $arr_param["table"]["field_types"]) : Array()); ?>
<script type="text/javascript">
	//<![CDATA[
	(function(){
		var otherTables = [];
		<c:foreach var="tables" name="iTable">
		<c:if cond="$iTable['table_id'] != $arr_param['table']['table_id']">
		otherTables.push({
			text: "#iTable.name",
			handler: function() {
                var Field = grid.getStore().recordType;
                var p = new Field({
                    field: 'fk_#iTable.name_id',
                    type: 'INTEGER NOT NULL REFERENCES tbl_#iTable.name'
                });
                grid.stopEditing();
                grid.getStore().insert(0, p);
			}
		});
		</c:if>
		</c:foreach>
		var grid = new Ext.grid.EditorGridPanel({
			store: gridStore = new Ext.data.Store({
				reader: new Ext.data.ArrayReader({
					idIndex: 0
				}, Ext.data.Record.create([
					{name: "field"},
					{name: "type"}
				]))
			}),
			cm: new Ext.grid.ColumnModel({
				defaults: {
					sortable: true
				},
				columns: [
					{
						header: "Name",
						dataIndex: "field",
						editor: new Ext.form.TextField({allowBlank: false})
					}, {
						header: "Field Type",
						dataIndex: "type",
						width: 147,
						editor: new Ext.form.ComboBox({
							typeAhead: true,
							triggerAction: "all",
							transform: "types#table.table_id",
							lazyRender: true,
		                    listClass: 'x-combo-list-small'
						})						
					}
				]
			}),
			renderTo: "table_#table.table_id",
			title: "#table.name",
			autoHeight: true,
			boxMaxWidth: 250,
			width: 250,
			clicksToEdit: 1,
			tbar: [{
				text: 'Add Field',
				handler : function(){
	                // access the Record constructor through the grid's store
	                var Field = grid.getStore().recordType;
	                var p = new Field({
	                    field: 'fieldname',
	                    type: 'VARCHAR(255)'
	                });
	                grid.stopEditing();
	                grid.getStore().insert(0, p);
	                grid.startEditing(0, 0);
	            }
	        },{
				text: "Remove Field",
				tooltip: "Deletes the selected field",
				handler: function() {
					grid.getStore().remove(grid.getSelectionModel().selection.record);
				}
			},{
				text: "Add Link",
				disabled: (otherTables.length <= 0),
				tooltip: "Creates a link to another table",
				menu: {
					items: otherTables
				}
			}]			
		});
		
		gridStore.loadData([
			<? foreach ($fields as $i=>$field) { ?>
				<? if ($i > 0) { ?>,<? } ?>
				["<?=$field?>", "<?=$types[$i]?>"]
			<? } ?>
		]);
		
		Ext.getCmp("portlet_content_db_<?=(int)$arr_param['table']['table_id']?>").getTopToolbar().add({
			xtype: "button",
			text: "Save",
			iconCls: "save",
			handler: function(e) {
				var fields = "";
				var types = "";
				var list = grid.getStore().data.items;
				for (var i = 0; i < list.length; i++) {
					var item = list[i];
					if (fields.length > 0) fields += ":";
					if (types.length > 0) types += ":";
					fields += item.data.field;
					types += item.data.type;
				}
				var params = {
					"table[name]": $("table_name_#table.table_id").getValue(),
					"table[field_names]": fields,
					"table[field_types]": types
				};
				var added = false;
				$$("fieldset input[type='checkbox'].tosave, fieldset select.tosave").each(function(item) {
					if ((item.nodeName.toLowerCase() == "select" && !item.disabled) || 
					   (item.checked && item.parentNode.visible())) {
						params[item.name] = item.value;
						added = true;
					}
				});
				if (parseInt("0"+params["scaffold[fk_module_id]"], 10) <= 0 && $('sel_module#table.table_id') && !$("sel_module#table.table_id").disabled) {
					Ext.Msg.alert("Status", "Please provide the module you want to generate the data queries / event handlers in.").setIcon(Ext.Msg.ERROR);
					return;
				}
				new Ajax.Request("?event=builder:editTable&check=1&table_id=<?=(int)$arr_param['table']['table_id']?>",{
					parameters: params,
					onSuccess: function(req) {
						Ext.ux.util.msg("Saving completed.", "Your changes have been saved successfully.");
						if (added) {
							loadURL("?event=builder:home&open_nav=qwbuilder_dbPanel");
							return;
						}
						if (<?=(int)$arr_param["table"]["table_id"]?> == 0) {
							try{
								var name = $("table_name_#table.table_id").getValue();
								var id = req.responseText.split(/\s/g)[0];
								Builder.closeTab("db_0");
							} catch(e){console.log(e);}
							var n = new Ext.tree.TreeNode({
								text: name,
								leaf: true,
								id: "db_"+id,
								allowChildren: false
							});
							Builder.dbRoot.appendChild(n);
							Builder.editTable(n);
						}
					}
				});
			}
		},"-");	
		Ext.getCmp("portlet_content_db_<?=(int)$arr_param['table']['table_id']?>").getTopToolbar().doLayout();
	})();
	//]]>
</script>
</div>
